<!-- 消息弹框 -->
<template>
  <div
    id="notification"
    v-show="vis"
    ref="noti"
    :style="{ '--left': pos }"
    :class="{ 'noti-show': showup, 'noti-dis': !showup }"
  >
    <div class="notification-title">通知</div>
    <div class="message" v-for="(noti, index) in notifacations" :key="index">
      <div class="message-inner">
        {{ noti }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: ["vis", "pos", "showup", "notifacations"],

  computed: {
    dSelection: function () {
      return this.cardData[this.selection].title;
    },
  },

  methods: {
    setPosition() {},
  },
  created() {
    console.log(this.pos);
  },
  watch: {
    pos(val) {
      console.log("pos is", val);
    },
  },
};
</script>
<style>
#notification {
  position: fixed;
  width: 360px;
  height: 440px;
  background-color: white;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  margin-top: 5rem;
  left: calc(var(--left) * 1px - 180px);
  padding: 20px;
  overflow-y: scroll;
  border-radius: 3px;
}
.notification-title {
  font-size: 16px;
  font-weight: 700;
  width: calc(100% - 10px);
  border-bottom: 1px rgb(223, 223, 223) solid;
  padding-bottom: 10px;
  padding-left: 10px;
}
#notification > .message {
  width: calc(100% - 20px);
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px rgb(223, 223, 223) solid;
}
#notification > .message > .message-inner {
  color: rgb(125, 125, 125);
  font-size: 14px;
  font-weight: 500;
}

.noti-show {
  animation: showup 0.2s cubic-bezier(0.76, 0.24, 0.33, 0.77);
}
.noti-dis {
  animation: disappear 0.2s cubic-bezier(0.76, 0.24, 0.33, 0.77);
}
@keyframes showup {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes disappear {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: top;
  }
  100% {
    opacity: 0;
    transform: translateY(-200x) scaleY(0);
    transform-origin: top;
  }
}
</style>